<script setup  lang="ts"  name="set_patrol_account">
import { defineComponent, onMounted, onActivated , reactive, ref, toRaw } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  accountList,accountSave,accountDel,
  getDeptTree,
} from "@/api/server_set_patrol";
    const isEdit = ref(false);
    const height = ref(0);
    const dialogVisible_add = ref(false);

    const listParams = ref({
      page: 1,
      pageSize: 20,
    });
    const List = ref([]);
    const total = ref(0);

    const deptOptions = ref([]);
   
    const currentPage = ref(1);
    const accountRoleOption = ref<any>({});
    const formData = ref<any>({});
    const cascaderProps = reactive({
      label: "label",
      value: "id",
      children: "children",
      checkStrictly: true,
      emitPath: false,
    });
    const addItem = () => {
      isEdit.value = false;
      formData.value = {}
      dialogVisible_add.value = true;
    };
    const openChangePassword = () => {};
    const edit = (row: any) => {
      isEdit.value = true;
      formData.value = {
        ...row,
      };
      dialogVisible_add.value = true;
    };
    const remove = (row: any) => {
      ElMessageBox.confirm(
        `<span>确定要删除人员 <i style="color:#58B2C5;">${row.name}</i> 吗</span>`,
        "提 示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          dangerouslyUseHTMLString: true,
          type: "warning",
        }
      ).then(async () => {
        let res = await accountDel({
           id: row.account_id,
        });
        if (res.result == "success") {
          dialogVisible_add.value = false;
          //添加完成后重新获取数据
          getList(0);
          ElMessage({
            type: "success",
            message: "删除成功!",
          });
        }
      });
    };
    const handleSizeChange = (val: number) => {
      listParams.value.pageSize = val;
      getList(listParams.value.page);
    };
    const handleCurrentChange = (val: number) => {
      getList(val);
    };
    const confirmAdd = async () => {
      let form = formData.value;
      let res = await accountSave({
        id: isEdit ? form.account_id : 0,
        ...form,
      });
      if (res.result == "success") {
        dialogVisible_add.value = false;
        //添加完成后重新获取数据
        getList(0);
      }
    };
    const getList = async (page: number) => {
      let res = await accountList({
        ...toRaw(listParams.value),
        page,
      });
      if (res.result == "success") {
        List.value = res.list;
        accountRoleOption.value = res.accountRoleOption
        total.value = Number(res.total);
        console.log('账号',List.value);
        
      }
    };
    const setpasswordShow = (data: any, type: any)=>{
        data.passwordShow = type
      }
    onMounted(() => {
      let pageTable: any = document.querySelector(".page-table");
      height.value = pageTable.clientHeight;
      console.log(height);
      getList(1);
    });
</script>

<template>
  <div class="patrol_account-page">
    <div class="page-top">
      <h4>账号配置</h4>
      <el-button type="primary" size="small" @click="addItem"
        >新增人员</el-button
      >
    </div>
    <div class="page-table">
      <el-table ref="table" v-if="height" :data="List" :height="height">
        <el-table-column label="姓名" prop="username"></el-table-column>
        <el-table-column label="角色" prop="role">
          <template #default="scope">
              <span>{{accountRoleOption[scope.row.role]}}</span>
          </template>
        </el-table-column>
        <el-table-column label="电话" prop="phone"></el-table-column>
        <el-table-column label="密码" prop="password">
          <template #default="row">
          <div
              v-if="row.passwordShow">
              <svg-icon
                icon-class="eyes2"
                @click="setpasswordShow(row, false)"
                style="width: 1em; height: 1em;cursor:pointer"
              ></svg-icon><span>{{ row.password }}</span>
            </div>
            <div v-else >
              <svg-icon
                icon-class="eyes"
                @click="setpasswordShow(row, true)"
                style="width: 1em; height: 1em;cursor:pointer"
              ></svg-icon><span>*****</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button link size="small" @click="edit(scope.row)">编辑</el-button>
            <el-button link size="small" @click="remove(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        v-model:currentPage="currentPage"
        :page-sizes="[20, 50, 80, 100]"
        :page-size="listParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
   <el-dialog :close-on-click-modal="false" 
      :title="isEdit ? '编辑账户':'新增账户'"
      v-model="dialogVisible_add"
      width="400px"
    >
      <el-form ref="form" :model="formData" label-width="80px">
         <el-form-item label="姓名">
          <el-input type="text" v-model="formData.username"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="formData.role" placeholder="">
            <el-option :label="item" :value="key" v-for="(item,key) in accountRoleOption" :key="key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电话">
          <el-input type="text" v-model="formData.phone"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="text" v-model="formData.password"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible_add = false">取 消</el-button>
          <el-button type="primary" @click="confirmAdd">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.patrol_account-page {
  width: 100%;
  height: 100%;
  .page-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .page-table {
    margin: 16px 0;
    height: calc(100% - 100px);
  }
}
</style>
